<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <title>发送信息</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            font-family: 微软雅黑, Helvetica, "STHeiti STXihei", "Microsoft JhengHei", "Microsoft YaHei", Arial;
        }
        form{
            width:40%;
            min-width: 512px;
            margin: 40px auto;
        }
        .input-box{
            height: 40px;
            line-height: 40px;
            margin-bottom: 30px;
        }
        label{
            font-size: 16px;
            color: #999999;
            letter-spacing: -0.39px;
            width:19%;
        }
        input,select{
            width:80%;
            float:right;
            height: 100%;
            background: #FFFFFF;
            border: 1px solid #E8E8E8;
            outline: 0;
            font-size: 16px;
            text-indent: 5px;
        }
        input[type='button']{
            background: #505050;
            height: 40px;
            width:140px;
            color:#fff;
            border: 0;
            cursor: pointer;
        }
        .alert{
            position: absolute;
            top:20%;
            left: 50%;
            margin-left: -180px;
            width:360px;
            height:80px;
            line-height: 80px;
            background: #030303;
            opacity: 0.8;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            display: none;
        }
        input.license-no{
            text-transform:uppercase;
        }
    </style>
</head>
<body>
    <form id="my-app">
        <div class="input-box">
            <label>车牌号</label>
            <input placeholder="请输入车牌号" typpe="text" v-model="formData.licenseNo" class="license-no">
        </div>
        <div class="input-box">
            <label>手机号</label>
            <input placeholder="请输入手机号" typpe="tel" v-model="formData.mobile">
        </div>
        <div class="input-box">
            <label>姓名</label>
            <input placeholder="请输入姓名" typpe="text" v-model="formData.customer">
        </div>
        <div class="input-box">
            <label>投保公司</label>
            <input placeholder="请输入投保公司名称" typpe="text" v-model="formData.insurerName">
        </div>
        <div class="input-box">
            <label>商业险保单号</label>
            <input placeholder="请输入商业险保单号" typpe="text" v-model="formData.biCode">
        </div>
        <div class="input-box">
            <label>交强险保单号</label>
            <input placeholder="请输入交强险保单号" typpe="text" v-model="formData.ciCode">
        </div>
        <div class="input-box">
            <label>选择快递公司</label>
            <select placeholder="请选择快递公司" type="text" v-model="formData.expressName">
                <option v-for="item in express" :value="item">{{item}}</option>
            </select>
        </div>
        <div class="input-box">
            <label>快递单号</label>
            <input placeholder="请输入快递单号" typpe="text" v-model="formData.expressCode">
        </div>
        <input type="button" value="发送" @click="submit">
    </form>
    <div class="alert"></div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/vue.min.js"></script>
<script>
    //手机号码正则表达式
    var mobileReg = /^1[3|4|5|7|8][0-9]{9}$/;
    //车牌号的正则表达式
    var carReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
   // var ip="http://192.168.5.120:3000";
    var ip = "http://mobile.ydche.com";

    $(function(){
        var vm = new Vue({
            el:"#my-app",
            data:{
                express:["圆通快递","中通快递","国通快递","申通快递","韵达快递","宅急送","顺丰速递"],
                formData:{
                    "mobile":"",
                    "customer":"",
                    "licenseNo":"",
                    "insurerName":"",
                    "ciCode":"",
                    "biCode":"",
                    "expressName":"",
                    "expressCode":""
                }
            },
            methods:{
                submit:function(){
                    vm.formData.licenseNo = vm.formData.licenseNo.toUpperCase();
                    console.log(vm.formData.customer);
                    if(!carReg.test(vm.formData.licenseNo)){
                        my_alert("车牌号格式不对");
                        return;
                    }
                    if(!mobileReg.test(vm.formData.mobile)){
                        my_alert("手机号格式不对");
                        return;
                    }
                    if(vm.formData.insurerName == ""){
                        my_alert("保险公司名称不能为空");
                        return;
                    }
                    if(vm.formData.customer == ""){
                        my_alert("客户姓名不能为空");
                        return;
                    }
                    if(vm.formData.ciCode == ""){
                        my_alert("交强险单号不能为空");
                        return;
                    }
                    if(vm.formData.biCode == ""){
                        my_alert("商业险单号不能为空");
                        return;
                    }
                    if(vm.formData.expressName == ""){
                        my_alert("快递名称不能为空");
                        return;
                    }
                    if(vm.formData.expressCode == ""){
                        my_alert("快递单号不能为空");
                        return;
                    }
                    $.ajax({
                        type: "post",
                        url: ip+'/order/sms/notify_orderInfo',
                        data:JSON.stringify(vm.formData),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function(data){
                             console.log(data);
                             if(data.code == "0000"){
                                 my_alert("发送短信成功");
                             }else{
                                 my_alert(data.msg);
                             }
                        },
                        error:function(xhr,textStatus){
                            my_alert("网络异常，请稍后重试。");
                            console.log('错误');
                            console.log(xhr);
                            console.log(textStatus);
                        }
                    });
                }
            }
        });
    });


    function my_alert(msg){
        if(msg != ""){
            $(".alert").text(msg);
            $(".alert").show();
            var t = setTimeout(function(){
                clearTimeout(t);
                $(".alert").hide();
            },2000);
        }
    }
</script>
